<template >
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="navbar">
            <h3>约车中心</h3>
        </div>
    </div>
    <van-tabs @click="tabsClick" v-model="active">
      <van-tab title="科目二">
        <div class="subjectOne">
          <div>请选择教练员：</div>
          <div class="coach_box">
            <div v-for="(item,index) in subjectOneList" :key="index" @click="chooseCoach(item)" class="coach">
              <van-button size="medium" type="primary">{{item.coachName}}</van-button>
            </div>
          </div>
          <!-- 分页 -->
            <div class="pagination"><van-pagination v-model="currentPage" @change="pageChange" :total-items="pageTotal" :items-per-page="pageSize" /></div>
          <div class="time_box">
            <div>请选择时间段：</div>
            <van-badge :content="coachObj.EightCount">
              <van-button @click="chooseTimeHandel(1)" :disabled="coachDisabled" type="primary">
                <span>8:00~10:00</span>
              </van-button>
            </van-badge>
            <van-badge  :content="coachObj.tenCount">
              <van-button @click="chooseTimeHandel(2)" :disabled="coachDisabled" type="primary">
                <span>10:00~12:00</span>
              </van-button>
            </van-badge>
            <van-badge :content="coachObj.twelveCount">
              <van-button @click="chooseTimeHandel(3)" :disabled="coachDisabled" type="primary">
                <span>12:00~14:00</span>
              </van-button>
            </van-badge>
            <van-badge :content="coachObj.fourteenCount">
              <van-button @click="chooseTimeHandel(4)" :disabled="coachDisabled" type="primary">
                <span>14:00~16:00</span>
              </van-button>
            </van-badge>
            <van-badge :content="coachObj.sixteenCount">
              <van-button @click="chooseTimeHandel(5)" :disabled="coachDisabled" type="primary">
                <span>16:00~18:00</span>
              </van-button>
            </van-badge>
          </div>
          <div class="nowChoose">当前选择<van-tag type="success">{{coachName}}</van-tag>教练的<van-tag type="success">{{TimePeriod}}</van-tag></div>
          <div class="drivingRecord">
            <van-button color="#7232dd" @click="() => {this.$router.push({path:'/manager/Reservation'})}">我的预约</van-button>
            <van-button color="#7232dd" @click="() => {this.$router.push({path:'/manager/Record'})}">练车记录</van-button>
          </div>
          <div class="reserve"><van-button :disabled="reserveDisabled" @click="reservePractice" type="primary" block>我要预约</van-button></div>
        </div>
      </van-tab>
      <van-tab title="科目三">
        <div class="subjectTwo">
          <div>请选择教练员：</div>
          <div class="coach_box">
              <div v-for="(item,index) in subjectTwoList" :key="index" @click="chooseCoach(item)" class="coach">
                <van-button size="medium" type="primary">{{item.coachName}}</van-button>
              </div>
            </div>
            <!-- 分页 -->
            <div class="pagination"><van-pagination v-model="currentTwoPage" @change="pageTwoChange" :total-items="pageTwoTotal" :items-per-page="pageSize" /></div>
            <div class="time_box">
              <div>请选择时间段：</div>
              <van-badge :content="coachObj.EightCount">
                <van-button @click="chooseTimeHandel(1)" :disabled="coachDisabled" type="primary">
                  <span>8:00~10:00</span>
                </van-button>
              </van-badge>
              <van-badge  :content="coachObj.tenCount">
                <van-button @click="chooseTimeHandel(2)" :disabled="coachDisabled" type="primary">
                  <span>10:00~12:00</span>
                </van-button>
              </van-badge>
              <van-badge :content="coachObj.twelveCount">
                <van-button @click="chooseTimeHandel(3)" :disabled="coachDisabled" type="primary">
                  <span>12:00~14:00</span>
                </van-button>
              </van-badge>
              <van-badge :content="coachObj.fourteenCount">
                <van-button @click="chooseTimeHandel(4)" :disabled="coachDisabled" type="primary">
                  <span>14:00~16:00</span>
                </van-button>
              </van-badge>
              <van-badge :content="coachObj.sixteenCount">
                <van-button @click="chooseTimeHandel(5)" :disabled="coachDisabled" type="primary">
                  <span>16:00~18:00</span>
                </van-button>
              </van-badge>
            </div>
            <div class="nowChoose">当前选择<van-tag type="success">{{coachName}}</van-tag>教练的<van-tag type="success">{{TimePeriod}}</van-tag></div>
            <div class="drivingRecord">
              <van-button color="#7232dd" @click="() => {this.$router.push({path:'/manager/Reservation'})}">我的预约</van-button>
              <van-button color="#7232dd" @click="() => {this.$router.push({path:'/manager/Record'})}">练车记录</van-button>
            </div>
            <div class="reserve"><van-button :disabled="reserveDisabled" @click="reservePracticeTwo" type="primary" block>我要预约</van-button></div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant';
import chauffeur from "../js/chauffeur";
export default {
  data() {
    return{
      reserveDisabled:true,
      coachDisabled:true,
      currentPage:1,
      currentTwoPage:1,
      active:0,
      pageSize:5,
      pageNum:1,
      pageTotal:1,
      pageTwoNum:1,
      pageTwoTotal:1,
      subjectOneList:[],
      subjectTwoList:[],
      coachName:"",
      coachID:"",
      TimePeriod:"",
      coachObj:{
        EightCount:0,
        fourteenCount:0,
        sixteenCount:0,
        tenCount:0,
        twelveCount:0,
      },
      telephone:"",
      reserveTime:{
        Eight: "-",
        ten: "-",
        twelve: "-",
        fourteen: "-",
        sixteen: "-",
      },
      reserveTimeString:"",
    }
  },
  mounted(){
    this.getSubjectOnePractice(1)
    this.getSubjectTwoPractice(1)
  },
  methods:{
    getNowFormatDateTime3:(date)=>{//获取后一天日期
        let time = ''
        if(date){
            time=new Date(date).getTime()+24*60*60*1000;
        }else{
            time=new Date().getTime()+24*60*60*1000;
        }
        let afterday=new Date(time);
        return afterday=afterday.getFullYear() + "-" + (afterday.getMonth()> 9 ? (afterday.getMonth() + 1) :  + (afterday.getMonth() + 1)) + "-" +(afterday.getDate()> 9 ? (afterday.getDate()) : "0" + (afterday.getDate()));
    },
    getSubjectOnePractice(value){
      let nowDate = new Date()
      let newDate = this.getNowFormatDateTime3(nowDate)
      let requestBody = {
        pageSize:this.pageSize,
        pageNum:value,
        create_time:newDate,
        catogary:'科二',
        coach: "",
      }
      chauffeur.getMenegerPractice(requestBody).then(res => {
        if(res.data.code === 0){
          this.subjectOneList = res.data.data.list
          this.pageTotal = res.data.data.Total
          this.pageNum = value
          this.currentPage = value
        }else{
          Toast.fail('未知错误');
        }
      })
    },
    // 分页
    pageChange(value){
      this.getSubjectOnePractice(value)
    },
    // 分页
    pageTwoChange(value){
      this.getSubjectTwoPractice(value)
    },
    // 点击选择时间段
    chooseTimeHandel(value){
      this.reserveDisabled = false
      switch (value) {
        case 1:
          this.TimePeriod = "8:00~10:00"
          this.reserveTime.Eight = "Eight"
          this.reserveTimeString = "Eight"
          break;
        case 2:
          this.TimePeriod = "10:00~12:00"
          this.reserveTime.ten = "ten"
          this.reserveTimeString = "ten"
          break;
        case 3:
          this.TimePeriod = "12:00~14:00"
          this.reserveTime.twelve = "twelve"
          this.reserveTimeString = "twelve"
          break;
        case 4:
          this.TimePeriod = "14:00~16:00"
          this.reserveTime.fourteen = "fourteen"
          this.reserveTimeString = "fourteen"
          break;
        case 5:
          this.TimePeriod = "16:00~18:00"
          this.reserveTime.sixteen = "sixteen"
          this.reserveTimeString = "sixteen"
          break;
      }
    },
     // 学员约科目二
     reservePractice(){
      let nowDate = new Date()
      let newDate = this.getNowFormatDateTime3(nowDate)
       let scoreDate = new Date().toLocaleDateString().replaceAll('/','-')
      let requestBody = {
        ...this.reserveTime,
        catogary:"科二",
        create_time:newDate,
        coach:this.coachID
      }
      
       chauffeur.updataPractice(requestBody).then(res => {
        if(res.data.code === 0 && res.data.data !=="学员已约车"){
          let requestObj = {
            attendTime: this.reserveTimeString,
            coach: this.coachID,
            status: "progress",
            telephone: this.telephone,
            catogary: "科二",
            create_time: newDate
          }
          let scoreObj = {
            score: 0,
            coach: this.coachID,
            status: "NotRated",
            trainee: this.$store.state.user.userInfo.id,
            content: "",
            catogary: "科三",
            create_time: scoreDate
          }
          chauffeur.createScore(scoreObj).then(res => {
            
          })
           chauffeur.createTrainee(requestObj).then(res =>{
            if(res.data.code === 0){
              Toast.success('预约成功');
            }else{
              Toast.fail('预约失败');
            }
          })
        }else{
          Toast.fail(res.data.data);
        }
      })
    },
    // 学员约科目三
     reservePracticeTwo(){
      let nowDate = new Date()
      let newDate = this.getNowFormatDateTime3(nowDate)
      let scoreDate = new Date().toLocaleDateString().replaceAll('/','-')
      let requestBody = {
        ...this.reserveTime,
        catogary:"科三",
        create_time:newDate,
        coach:this.coachID
      }
       chauffeur.updataPractice(requestBody).then(res => {
        if(res.data.code === 0 && res.data.data !=="学员已约车"){
           let requestObj = {
            attendTime: this.reserveTimeString,
            coach: this.coachID,
            status: "progress",
            telephone: this.telephone,
            catogary: "科三",
            create_time: newDate
          }
          let scoreObj = {
            score: 0,
            coach: this.coachID,
            status: "NotRated",
            trainee: this.$store.state.user.userInfo.id,
            content: "",
            catogary: "科三",
            create_time: scoreDate
          }
          chauffeur.createScore(scoreObj).then(res => {

          })
           chauffeur.createTrainee(requestObj).then(res =>{
            if(res.data.code === 0){
              Toast.success('预约成功');
            }else{
              Toast.fail('预约失败');
            }
          })
          //  chauffeur.createScore()
        }else{
          Toast.fail(res.data.data);
        }
      })
    },
    // 点击教练员
    chooseCoach(item){
      this.telephone = item.telephone
      this.reserveTime = {
        Eight: "-",
        ten: "-",
        twelve: "-",
        fourteen: "-",
        sixteen: "-",
      }
      this.reserveTimeString  = ""
      this.reserveDisabled = true
      this.coachDisabled = true
      this.coachName = item.coachName
      this.TimePeriod = ""
      this.coachID = item.coach
      let requestBody = {
        coach:item.coach,
        create_time:item.create_time
      }
      chauffeur.getAnyTime(requestBody).then(res => {
        if(res.data.code === 0){
          this.coachObj = res.data.data
          this.coachDisabled = false
        }
      })
    },
     getSubjectTwoPractice(value){
      let nowDate = new Date()
      let newDate = this.getNowFormatDateTime3(nowDate)
      let requestBody = {
        pageSize:this.pageSize,
        pageNum:value,
        create_time:newDate,
        catogary:'科三',
        coach: "",
      }
      chauffeur.getMenegerPractice(requestBody).then(res => {
        if(res.data.code === 0){
          this.subjectTwoList = res.data.data.list
          this.pageTwoTotal = res.data.data.Total
          this.currentTwoPage = value
          this.pageTwoNum = value
        }else{
          Toast.fail('未知错误');
        }
      })
    },
    tabsClick(){
      this.coachName = ""
      this.coachDisabled = true
      this.reserveDisabled = true
      this.coachID = ""
      this.reserveTime = {
        Eight: "-",
        ten: "-",
        twelve: "-",
        fourteen: "-",
        sixteen: "-",
      }
      this.reserveTimeString = ""
      this.TimePeriod = ""
      this.telephone = ""
      this.coachObj = {
        EightCount:0,
        fourteenCount:0,
        sixteenCount:0,
        tenCount:0,
        twelveCount:0,
      }
    }
  }
}
</script>

<style scoped lang="less">
  .container{
    .header{
      .navbar {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 50px;
        text-align: center;
        color: #fff;
        h3 {
          color: #fff;
          margin-top: 0;
          line-height: 50px;
        }
      }
    }
    .subjectOne{
      position: relative;
      height: 75vh;
      width: 90%;
      margin-left: 5%;
      border-radius: 10px;
      margin-top: 8%;
      background-color: white;
      .pagination{
        margin-top: 2%;
      }
      .coach_box{
        display: flex;
        .coach{
          margin-top: 5%;
          margin-left: 2%;
          margin-right: 2%;
          .van-button{
            width: 70px;
            height: 50px;
            font-size: 1.25rem;
          }
        }
      }
      .time_box{
        margin-top: 5%;
        .van-badge__wrapper{
          width: 100px;
          height: 50px;
          margin: 2%;
          .van-button{
            width: 100px;
            height: 50px;
            font-size: 1rem;
          }
        }
      }
      .nowChoose{
        margin-top: 2%;
      }
      .reserve{
        width: 100%;
        position: absolute;
        bottom: 0;
        .van-button{
          border-radius: 10px;
        }
      }
      .drivingRecord{
        .van-button{
          margin-left: 2%;
          margin-right: 2%;
          margin-top: 10%;
        }
      }
    }
    .subjectTwo{
      height: 75vh;
      width: 90%;
      margin-left: 5%;
      border-radius: 10px;
      margin-top: 8%;
      position: relative;
      background-color: white;
      .pagination{
        margin-top: 2%;
      }
      .coach_box{
        display: flex;
        .coach{
          margin-top: 5%;
          margin-left: 2%;
          margin-right: 2%;
          .van-button{
            width: 70px;
            height: 50px;
            font-size: 1.25rem;
          }
        }
      }
      .time_box{
        margin-top: 5%;
        .van-badge__wrapper{
          width: 100px;
          height: 50px;
          margin: 2%;
          .van-button{
            width: 100px;
            height: 50px;
            font-size: 1rem;
          }
        }
      }
      .nowChoose{
        margin-top: 2%;
      }
      .reserve{
        width: 100%;
        position: absolute;
        bottom: 0;
        .van-button{
          border-radius: 10px;
        }
      }
      .drivingRecord{
        .van-button{
          margin-left: 2%;
          margin-right: 2%;
          margin-top: 10%;
        }
      }
    }
  }
</style>